<template>
  <div id="table">
    <el-row>
      <el-col :span="24">
        <div class="table-grid-content">
          <el-button type="primary" @click="addRow()">新增</el-button>
        </div>
      </el-col>
    </el-row>

    <!--table-->
    <div class="Table-table">
      <el-table
       id="table"
       :data="tableform"
       ref="tableform"
       height="500" border
       >

        <el-table-column prop="id" label="角色编号" width="400"></el-table-column>
        <el-table-column prop="name" label="角色名" width="200"></el-table-column>
        <el-table-column prop="pop" label="操作" width="400">
          <template slot-scope="scope">
            <el-button size="small" @click="showAuthority(scope.row)">查看权限</el-button>
            <el-button size="small" @click="roleUpdate(scope.row)">修改</el-button>
            <el-button size="small" @click="roleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--showAuthorityForm-->
    <el-dialog
     title="查看权限"
     :visible.sync="authorityFormVisible"
     >

      <el-table id="authorityTable" :data="authorityform" ref="authorityform" border>
        <el-table-column prop="id" label="权限编号"></el-table-column>
        <el-table-column prop="name" label="角色权限"></el-table-column>
      </el-table>
      <el-button @click="cancel">关闭</el-button>
    </el-dialog>
    
    <!--updateForm-->
    <el-dialog
     title="修改"
     :visible.sync="updateFormVisible"
     >

      <el-form :model="updateForm" ref="updateForm">
        <el-form-item label="角色名" :label-width="formLabelWidth">
          <el-input v-model="updateForm.roleName" auto-complete="off"></el-input>
        </el-form-item> 
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <template>
            <el-checkbox
             :indeterminate="isIndeterminate"
             v-model="checkAll"
             @change="checkAllChange"
             >全选</el-checkbox>

            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkList" @change="checkedChange">
              <el-checkbox
               v-for="authority in roleAuthority"
               :label="authority"
               :key="authority"
               >{{authority}}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" v-on:click="sumbitUpdateRow()" :loading="addLoading">确定</el-button>
      </div>
    </el-dialog>
  
    <!--addForm-->
    <el-dialog
     title="新增角色"
     :visible.sync="addFormVisible"
     >

      <el-form :model="addForm" ref="addForm">
        <el-form-item label="角色名" :label-width="formLabelWidth">
        <el-input v-model="addForm.roleName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" v-on:click="sumbitAddRow()" :loading="addLoading">确定</el-button>
      </div>
    </el-dialog>
</div>
</template>

<script>
import {getMenu, getAllRole, addRole, updateRole, deleteRole} from '@/api/module/role'
const authorityOptions = ['井眼概述', '底层破裂压力', '固井总体设计', '固井现场设计', '公司单位', '开发者使用', '底层温度', '数据字典', '单位转换', '地层孔隙压力', '公共接口', '地层信息', '角色管理', '新增员工', '员工管理', '数据校验', '井身结构'];

export default {
  data () {
    return {
      checkAll: false,
      checkList: [],
      roleAuthority: authorityOptions,
      isIndeterminate: true,
      tableform: [],
      formLabelWidth: '80px',
      updateFormVisible: false, 
      updateForm: [],
      addFormVisible:false, 
      addLoading: false,
      addForm: [],
      authorityform: [],
      authorityFormVisible: false,
      updateRowName: ''
    }
  },
  methods: {
    getData () {
      getAllRole().then((res) => {
        console.log(JSON.stringify(res.data))
        this.tableform = res.data.data;
      }).catch(function(error){
          console.log(error);
        })
    },
    //checkList
    checkAllChange (val) {
      this.checkList = val ? authorityOptions : [];
      this.isIndeterminate = false;
    },
    checkedChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.roleAuthority.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.roleAuthority.length;
    } ,

    //showAuthority
    showAuthority (row) {
      this.authorityFormVisible = true;
      getMenu().then((res) => {
        console.log(JSON.stringify(res.data))
        this.authorityform = res.data.data;
      })
    },

    //add
     addRow () {
       this.addFormVisible = true;
     },
     sumbitAddRow () {
       console.log(this.addForm.roleName)
       addRole(this.addForm.roleName).then(this.addForm.roleName = '')
       this.addFormVisible = false
     },
     cancel () {
       this.addFormVisible = false;
       this.updateFormVisible = false;
       this.authorityFormVisible = false;
     },
     
     //delete
     roleDelete (row) {
       console.log(row.id)
       deleteRole(row.id)
     },

     //update
     roleUpdate (row) {
       this.updateFormVisible = true;
       console.log(row.name)   
       this.updateRowName = row.name  
     },
     sumbitUpdateRow () {
       console.log(this.updateRowName)
     }
     

  },
  mounted () {
    this.getData()
  }
}
</script>
<style>
.table-grid-content {
  border-radius: 4px;
  height: 50 px;
  background: #ebeef5;
  padding: 10px;
}
.table-input {
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 200px;
  font-size: 14px;
  height: 30px;
}
.Table-table {
  padding: 5px;
}
.el-table td {
  padding: 0.01 0px;
}
.el-table th {
  padding: 0px;
}
</style>
